<template>
  <div class="sport-rule pad">
    <div class="head">
      <span>科目规则设置</span>
    </div>

    <div style="display: flex; justify-content: space-between;" class="m-t-b">
      <div>
        <el-input
          style="width: 260px;"
          placeholder="输入科目名称搜索"
          v-model="searchText"
          @keypress.native.enter="handleSearch"
          @input="clearSearch"
          clearable
        />
        <el-button
          type="primary"
          @click="handleSearch"
          style="margin-left: 10px;"
        >
          <i class="el-icon-search"></i>
          搜索
        </el-button>
      </div>
      <el-button type="primary" @click="openAddDialog">
        <i class="el-icon-plus"></i>
        添加规则
      </el-button>
    </div>

    <el-table :data="subjectRuleList" stripe border class="m-t-b" v-loading="loading">
      <el-table-column label="关联规则名称" prop="examItemName"></el-table-column>
      <el-table-column label="适用机构">
        <template slot-scope="scope">
          {{scope.row.typeOfUse == 1 ? '学校' : '消防'}}
        </template>
      </el-table-column>
      <el-table-column label="适用性别">
        <template slot-scope="scope">
          {{scope.row.gender == 1 ? '男' : '女'}}
        </template>
      </el-table-column>
      <el-table-column label="年龄区间">
        <template slot-scope="scope">
          {{scope.row.minAge}}岁 - {{scope.row.maxAge}}岁
        </template>
      </el-table-column>
      <el-table-column label="成绩区间">
        <template slot-scope="scope">
          {{scope.row.minAchievement}} - {{scope.row.maxAchievement}}
        </template>
      </el-table-column>
      <el-table-column label="对应分数">
        <template slot-scope="scope">
          {{scope.row.score}}分
        </template>
      </el-table-column>
      <el-table-column label="对应等级">
        <template slot-scope="scope">
          {{levels[scope.row.level - 1]}}
        </template>
      </el-table-column>
      <el-table-column label="规则类型">
        <template slot-scope="scope">
          {{scope.row.type == 1 ? '普通规则' : '加分规则'}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="default"
            circle
            icon="el-icon-edit"
            @click="openEditDialog(scope.row)"
          ></el-button>
          <el-button
            type="danger"
            circle
            icon="el-icon-delete"
            @click="deleteSubjectRule(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="flex m-t-b"
      :page-size="pageSize"
      layout="prev, pager, next"
      @current-change="handlePagi"
      :total="subjectRuleTotal">
    </el-pagination>
    


    <el-dialog :title="dialogTitle" :visible.sync="showDialog">
      <el-form :model="subjectRule" label-position="top" :rules="rules" ref="subjectRule">
        <el-form-item label="关联科目" prop="examItemId">
          <el-select v-model="subjectRule.examItemId">
            <el-option
              v-for="item in subjects"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
              <span style="float: left">{{item.examItemName}}</span>
              <span
                :class="['type-i', item.textType == 1 ? 'type1' : 'type2']"
              >{{item.textType == 1? '消防员' : '干部'}}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规则等级">
          <el-radio-group v-model="subjectRule.level">
            <el-radio-button :label="1">优秀</el-radio-button>
            <el-radio-button :label="2">良好</el-radio-button>
            <el-radio-button :label="3">及格</el-radio-button>
            <el-radio-button :label="4">不及格</el-radio-button>
            <el-radio-button :label="5">其它</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="适用性别">
          <el-radio-group v-model="subjectRule.gender">
            <el-radio-button :label="1">男</el-radio-button>
            <el-radio-button :label="2">女</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="适用机构">
          <el-radio-group v-model="subjectRule.typeOfUse">
            <el-radio-button :label="1">学校</el-radio-button>
            <el-radio-button :label="2">消防</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄区间">
          <el-slider
            v-model="ageArea"
            range
            @change="changeAgeArea"
            :min="0"
            :max="100"
            :marks="ageMarker">
          </el-slider>
        </el-form-item>
        <el-form-item label="成绩区间">
          <!-- <el-slider
            v-model="scoreArea"
            range
            @change="changeScoreArea"
            :min="0"
            :max="100"
            :marks="scoreMarker">
          </el-slider> -->
          <div style="display: flex;">
            <el-input
              placeholder="最小成绩"
              style="width: 100px;"
              v-model="subjectRule.minAchievement"
            />
            <span style="padding: 0 10px;">至</span>
            <el-input
              placeholder="最大成绩"
              style="width: 100px;"
              v-model="subjectRule.maxAchievement"
            />
          </div>
        </el-form-item>
        <el-form-item label="对应分数" prop="score">
          <el-input v-model="subjectRule.score" type="number" />
        </el-form-item>

        <el-form-item label="应测年级" v-if="subjectRule.typeOfUse == 1">
          <el-select v-model="subjectRule.grade">
            <el-option
              v-for="(item, index) in grades"
              :key="index"
              :label="item.value"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规则类型">
          <el-radio-group v-model="subjectRule.type">
            <el-radio-button :label="1">普通规则</el-radio-button>
            <el-radio-button :label="2">加分规则</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="saveSubjectRule" :loading="addLoading">保存</el-button>
    </el-dialog>
  </div>
</template>
<script>
import {
  createSubjectRule,
  updateSubjectRule,
  getSubjectRuleList,
  getAllSportItem,
  deleteSubjectRule
} from '../api/version2'
export default {
  name: 'SportRule',
  data () {
    return {
      showDialog: false,
      dialogTitle: '添加科目规则',
      ageArea: [18, 45],
      scoreArea: [0, 10],
      ageMarker: {
        18: '18岁',
        45: '45岁'
      },
      scoreMarker: {
        0: '0',
        10: '10'
      },
      searchText: '',
      subjects: [],
      subjectRule: {
        examItemId: '', //  测试项id
        level: 1, // 等级(1优2良3及格4不及格5其它)
        gender: 1, // 性别(1男2女)
        typeOfUse: 2, // 使用类型(1学校, 2消防)
        minAge: 18, // 最小年龄
        maxAge: 45, // 最大年龄
        minAchievement: 0,// 最小成绩
        maxAchievement: 10, // 最大成绩
        score: '',// 成绩区间对应分数
        // units: '', // 单位（米、秒、千克、毫升、厘米、次）
        grade: null, // 应测年级(1~6小学一到六年级，7~10初中一到四年级，11~13高中一到三年级，14~18大学一到五年级)
        type: 1, // 规则类型(1普通规则2加分规则)
      },
      levels: ['优秀', '良好', '及格', '不及格'],
      addLoading: false,
      subjectRuleList: [],
      subjectRuleTotal: 0,
      loading: false,
      pageSize: 10,
      subjectRuleId: '',
      grades: [
        { label: '1~6', value: '小学一至六年级' },
        { label: '7~10', value: '初中一至四年级' },
        { label: '11~13', value: '高中一至三年级' },
        { label: '14~18', value: '大学一至五年级' }
      ],
      rules: {
        examItemId: [
          { required: true, message: '请关联测试科目', trigger: 'change' }
        ],
        // score: [
        //   { required: true, message: '请填写对应分数', trigger: 'blur' }
        // ]
      }
    }
  },
  methods: {
    handleSearch () { // 搜索事件
      if (!this.searchText.trim()) {
        return this.$message.error('搜索内容不能为空')
      };
      this.fetchSubjectList(1)
    },
    clearSearch () { // 清除搜索
      if (!this.searchText) {
        this.fetchSubjectList(1)
      }
    },
    deleteSubjectRule (row) { // 删除规则
      this.$confirm(`确定删除该规则吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(r => {
        deleteSubjectRule(row.id)
        .then(res => {
          this.$message.success('删除成功');
          this.fetchSubjectList(1)
        })
        .catch(e => {

        })
      })
      .catch(err => {

      })
    },
    openEditDialog (row) { // 打开修改弹出框
      this.subjectRuleId = row.id;
      this.subjectRule.examItemId = row.examItemId;
      this.subjectRule.level = Number(row.level);
      this.subjectRule.gender = row.gender;
      this.subjectRule.typeOfUse = row.typeOfUse;
      this.subjectRule.minAge = row.minAge;
      this.subjectRule.maxAge = row.maxAge;
      this.subjectRule.minAchievement = row.minAchievement;
      this.subjectRule.maxAchievement = row.maxAchievement;
      this.subjectRule.score = row.score;
      this.subjectRule.grade = row.grade;
      this.subjectRule.type = row.type;
      this.ageArea = [row.minAge, row.maxAge];
      this.ageMarker = {
        [row.minAge]: row.minAge + '岁',
        [row.maxAge]: row.maxAge + '岁'
      };
      this.scoreArea = [row.minAchievement, row.maxAchievement];
      this.scoreMarker = {
        [row.minAchievement]: row.minAchievement,
        [row.maxAchievement]: row.maxAchievement
      };
      this.dialogTitle = '修改科目规则';
      this.showDialog = true
    },
    openAddDialog () { // 打开添加弹出框
      this.subjectRule.examItemId = '';
      this.subjectRule.level = 1;
      this.subjectRule.gender = 1;
      this.subjectRule.typeOfUse = 2;
      this.subjectRule.minAge = 18;
      this.subjectRule.maxAge = 45;
      this.subjectRule.minAchievement = 0;
      this.subjectRule.maxAchievement = 10;
      this.subjectRule.score = '';
      this.subjectRule.grade = '';
      this.subjectRule.type = 1;
      this.ageArea = [18, 45];
      this.ageMarker = {
        18: '18岁',
        45: '45岁'
      };
      this.scoreArea = [0, 10];
      this.scoreMarker = {
        0: '0',
        10: '10'
      };
      this.dialogTitle = '添加科目规则';
      this.showDialog = true
    },
    handlePagi (page) { // 分页事件
      this.fetchSubjectList(page)
    },
    saveSubjectRule () { // 保存规则
      this.$refs.subjectRule.validate(valid => {
        if (valid) {
          this.addLoading = true;
          if (this.dialogTitle === '添加科目规则') {
            createSubjectRule(this.subjectRule)
            .then(res => {
              this.$message.success('添加成功');
              this.showDialog = false;
              this.addLoading = false;
              this.fetchSubjectList(1)
            })
            .catch(e => {
              this.addLoading = false
            })
          } else {
            updateSubjectRule({
              id: this.subjectRuleId,
              ...this.subjectRule
            })
            .then(res => {
              this.$message.success('修改成功');
              this.showDialog = false;
              this.addLoading = false;
              this.fetchSubjectList(1)
            })
            .catch(e => {
              this.addLoading = false
            })
          }
        } else {
          return false
        }
      })
    },
    fetchSubjectList (index) { // 查询规则列表
      this.loading = true;
      getSubjectRuleList({
        index,
        count: this.pageSize,
        queryParam: {
          examItemName: this.searchText || null
        }
      })
      .then(res => {
        this.loading = false;
        let list = res.data.data.list || [];
        console.log(list)
        this.subjectRuleList = list;
        this.subjectRuleTotal = res.data.data.totalRecord
      })
      .catch(e => {
        this.loading = false
      })
    },
    changeAgeArea (e) { // 改变年龄区间
      this.subjectRule.minAge = e[0];
      this.subjectRule.maxAge = e[1];
      this.ageMarker = {
        [e[0]]: e[0] + '岁',
        [e[1]]: e[1] + '岁'
      }
    },
    changeScoreArea (e) { // 改变成绩区间
      this.subjectRule.minAchievement = e[0];
      this.subjectRule.maxAchievement = e[1];
      this.scoreMarker = {
        [e[0]]: e[0],
        [e[1]]: e[1]
      }
    },
    fetchAllSubject () { // 查询所有科目
      getAllSportItem(0)
      .then(res => {
        let list = res.data.data || [];
        this.subjects = list
      })
      .catch(e => {})
    }
  },
  created () {
    this.fetchSubjectList(1);
    this.fetchAllSubject()
  }
}
</script>
<style lang="scss">
  .type-i {
    display: inline-block;
    float: right;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
    &.type1 {
      background-color: #FEF6F4;
      color: #F28E71;
    }
    &.type2 {
      background-color: #F6FAFE;
      color: #88BAE8;
    }
  }
</style>
